<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reg.css">
</head>

<body>
    <div class="site-logo">
        <img class="logo" src="imgs/baidu.png" alt="">
    </div>
    <!-- 主要内容 -->
    <div class="content">
        <div class="kouhao">
            <h1>用科技</h1>
            <h2>让复杂的世界更简单</h2>
        </div>
        <!-- 注册内容 -->
        <div class="reg-wrapper">
            <h1>欢迎注册</h1>
            <div>已有帐号？<a href="#">登录</a></div>
            <form>
                <div class="form-item">
                    <label class="title">用户名</label>
                    <div class="box">
                        <div class="tip">
                            设置后不可更改,中英文均可,长度6~14位
                            <!-- 箭头 -->
                            <span class="arrow"></span>
                        </div>
                        <input id="username" type="text" placeholder="请设置用户名">
                        <div class="error">用户名仅支持中英文、数字和下划线,且不能为纯数字</div>
                    </div>
                </div>
                <div class="form-item">
                    <label class="title">手机号</label>
                    <div class="box">
                        <input id="phone" type="text" placeholder="可用于登录和找回密码">
                        <div class="error">手机号码格式不正确</div>
                    </div>
                </div>
                <div class="form-item">
                    <label class="title">密码</label>
                    <div class="box">
                        <div class="tip">
                            <div>长度为8~14个字符</div>
                            <div>字母/数字以及标点符号至少包含2种</div>
                            <div>不允许有空格、中文</div>
                            <!-- 箭头 -->
                            <span class="arrow"></span>
                        </div>
                        <input id="pwd" type="password" placeholder="可用于登录和找回密码">
                        <a href="#" id="show_pwd" class="hide-pwd"></a>
                        <div class="error">密码设置不符合要求</div>
                    </div>
                </div>
                <div class="form-item">
                    <label class="title">验证码</label>
                    <div class="box">
                        <input type="text" id="code" placeholder="可用于登录和找回密码">
                        <button id="getcode">获取验证码</button>
                    </div>
                </div>
                <button id="zhuce">注册</button>
                <div class="tiaokuan">
                    <label>
                        <input type="checkbox">阅读并接受
                    </label>
                    <a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
                </div>
            </form>
        </div>
    </div>
    <div class="bottom">
        <a href="#">帮助中心</a>
        <span class="line"></span>
        <a href="#"><img class="service" src="imgs/service-2x.png" alt=""></a>
        <span class="copyright">2020 ©Baidu</span>
    </div>
    <script src="reg.js"></script>
</body>

</html>